﻿@model SIG.ViewModel.Admin.ProductListVM

@{
    ViewBag.PageTitle = "产品列表";
    ViewBag.Title = ViewBag.PageTitle + "_内容";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}

@section Header{
    <link href="~/Content/Plugins/lightbox/ekko-lightbox.min.css" rel="stylesheet" />
<link href="~/Content/Plugins/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
    <script src="~/Content/plugins/ckeditor/ckeditor.js"></script>
    <script src="~/Content/plugins/ckfinder/ckfinder.js"></script>
}



<div class="main-content">
    <div class="panel panel-default sig-panel-tabs">
        <header class="panel-heading">
           <h3 class="panel-title"><span class="glyphicon glyphicon-th"></span> @ViewBag.PageTitle</h3>

        </header>

   
            <section class="panel-body">

                @Ajax.RawActionLink("<i class='fa fa-plus fa-fw'></i>添加产品",
                        "AddProduct", "Product",
                        new { },
                        new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "edit-container", OnComplete = "onAjaxComplete", OnSuccess = "OnSuccessLink" },
                        new { @class = "btn btn-primary pull-right" })
             
                <div class="form-inline">
                    @Html.DropDownList("ddlCategories", Model.Categories, new { @class = "form-control" })
                </div>
            </section>

           
                <table class="table table-hover table-striped table-vmiddle">
                    <thead>
                        <tr>
                            <th></th>
                            <th>
                                缩略图
                            </th>
                            <th>
                                产品型号
                            </th>
                            <th>
                                产品名称
                            </th>
                            <th>
                                所属分类
                            </th>
                            <th>
                                产品图片
                            </th>
                            <th>
                                显示
                            </th>
                            <th>
                                推荐
                            </th>
                            <th>
                                发布者
                            </th>
                            <th>
                                创建日期
                            </th>
                           
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var Product in Model.Products)
                        {
                            var className = Product.Recommend ? "btn-warning" : "btn-default";
                            var actionName = Product.Recommend ? "撤消" : "推荐";
                            <tr>
                                <td>
                                    <!-- Split button -->
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary">操作</button>
                                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="caret"></span>
                                            <span class="sr-only">Toggle Dropdown</span>
                                        </button>
                                        <ul class="dropdown-menu ">

                                            <li>
                                                @Ajax.RawActionLink("<i class='fa fa-edit fa-fw'></i>编辑",
                        "EditProduct", "Product",
                        new { id = Product.Id },
                        new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "edit-container", OnComplete = "onAjaxComplete", OnSuccess = "OnSuccessLink" },
                        new { })
                                            </li>
                                            <li>
                                                <a href="#" data-url="@Url.Action("Active", new {id = Product.Id})" class="active-item">
                                                    @Html.Raw(Product.Active ? "<i class='fa fa-eye-slash fa-fw'></i>隐藏" : "<i class='fa fa-eye fa-fw'></i>显示")
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" data-url="@Url.Action("Recommend", new {id = Product.Id})" class="recommend-item">
                                                    @Html.Raw(Product.Recommend ? "<i class='fa fa-star fa-fw'></i>撤消推荐" : "<i class='fa fa-star-o fa-fw'></i>推荐")
                                                </a>
                                            </li>
                                            <li role="separator" class="divider"></li>
                                            <li>
                                                @Ajax.RawActionLink("<i class='fa fa-picture-o fa-fw'></i>上传产品图片",
                        "Photos", "Product",
                        new { productId = Product.Id },
                        new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "edit-container", OnComplete = "onAjaxPhotosComplete", OnSuccess = "OnSuccessLink" },
                        new { })
                                            </li>
                                            <li role="separator" class="divider"></li>
                                            <li>
                                                <a href="#" data-url="@Url.Action("Delete", new {id = Product.Id})" class="delete-item" title="删除">
                                                    <i class="fa fa-trash-o fa-fw"></i>删除
                                                </a>
                                            </li>
                                        </ul>
                                    </div>

                                </td>
                                <td>
                                    <a href="@Product.Thumbnail" data-toggle="lightbox" title="@Product.ProductName">
                                        <img class="img-thumbnail" src="@string.Format("{0}?w=30&h=30&mode=crop", Product.Thumbnail)" alt="@Product.ProductName" />
                                    </a>                         
                                </td>
                                <td>
                                    @Product.ProductNo
                                </td>
                                <td>
                                    @Product.ProductName
                                </td>
                                <td>
                                    @Product.CategoryTitle
                                </td>
                                <td>
                                    @Product.ProductPhotoes.Count
                                </td>
                                <td>
                                    <input type="checkbox" @(Product.Active?"checked":"") disabled />
                                </td>
                                <td>
                                    <input type="checkbox" @(Product.Recommend ? "checked" : "") disabled />
                                </td>
                                <td>
                                    @Product.CreatedBy
                                </td>


                                <td>@Product.CreatedDate.ToShortDateString()</td>
                                
                            </tr>
                        }

                    </tbody>

                </table>

        
            <footer class="panel-footer">           
                 @Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page => Url.Action("Index", new { page = page,catId = Model.CatId }))             
            </footer>


        </div>
    </div>
<!-- end main container -->


<div id="edit-container">
</div>

<form id="anti-form" method="post">
    @Html.AntiForgeryToken()
</form>


@section footer {
    @Scripts.Render("~/bundles/jqueryvalWithBootstrap")
    <script src="~/Content/Plugins/lightbox/ekko-lightbox.min.js"></script>
<script src="~/Content/Plugins/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="~/Content/Plugins/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script>

    <script>
        function SetThumbnail(fileUrl) {
            $('#Thumbnail').val(fileUrl);
        }

        function SetImageUrl(fileUrl) {
            $('#ImageUrl').val(fileUrl);
        }


        function OnSuccessLink(data) {
            Common.ShowBox(data.Status, data.Message, "操作")
        }

        function onAjaxComplete() {
            $('#ModalEdit').modal();

            var editor = CKEDITOR.replace("Body", {
                filebrowserImageBrowseUrl: '/Content/plugins/ckfinder/ckfinder.html?type=Images',
                filebrowserUploadUrl: '/Content/plugins/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',
                filebrowserImageUploadUrl: '@Url.Content("~/Content/Uploads")'
            });

            $("#btnThumbnail").on("click", function () {
                var finder = new CKFinder();
                //  finder.basePath = '/plugins/ckfinder/';
                finder.selectActionFunction = SetThumbnail;
                finder.popup();
            });

            $("#btnImageUrl").on("click", function () {
                var finder = new CKFinder();
                finder.selectActionFunction = SetImageUrl;
                finder.popup();
            });

            $('.selectpicker').selectpicker('refresh');

        }


        function onBegin() {
            $("#btnSave i").removeClass("fa-save").addClass("fa-spinner fa-spin")
        }
        function onComplete() {
            $("#btnSave i").removeClass("fa-spinner fa-spin").addClass("fa-save")
        }


        function updateSuccess(data) {

            switch (data.Status) {
                case 2:
                    toastr.error(data.Message, '@ViewBag.Title');
                    break;
                case 1:
                    toastr.success(data.Message, '@ViewBag.Title');
                    $('#ModalEdit').modal('hide');
                    setTimeout(function () {
                        location.reload();
                    }, 1000);
                    break;
                case 4:
                    toastr.warning(data.Message, "@ViewBag.Title")
                    break;
            }

        }

        //======== upload product photos ================
        function SetThumbnail(fileUrl) {
            $('#ImgURL').val(fileUrl);
        }

        function uploadSuccess(data) {
            Common.ShowBox(data.Status, data.Message, "操作");
            var url = "/Admin/Product/GetPhotos?productId=" + data.Data;
            $("#photos-container").load(url);
        }


        function onAjaxPhotosComplete() {
            $('#ModalPhotoEdit').modal();

            $("#btnThumbnail").on("click", function () {
                var finder = new CKFinder();
                //  finder.basePath = '/plugins/ckfinder/';
                finder.selectActionFunction = SetThumbnail;
                finder.popup();
            });


            //delete
            $(document).on("click", '.deletePhoto-item', function (e) {
                e.preventDefault();
                var url = $(this).attr('data-url');

                bootbox.setLocale("zh_CN");

                bootbox.confirm("是否确定删除该项？", function (result) {
                    if (result) {
                        $.post(url, $("#anti-form").serialize(), function (data) {

                            Common.ShowBox(data.Status, data.Message, "操作")

                            var url = "/Admin/Product/GetPhotos?productId=" + data.Data;
                            $("#photos-container").load(url);
                        });
                    }
                });
            });


        }
        //======== end upload product photos ================

        $(function () {


            //分类过滤文章
            $("#ddlCategories").change(function () {
                var catId = $(this).val();
                location.href = "/Admin/Product/Index?catId=" + catId;
            });

            //lightbox events
            $(document).delegate('*[data-toggle="lightbox"]', 'click', function (event) {
                event.preventDefault();
                $(this).ekkoLightbox();
            });

            //active
            $(document).on("click", '.active-item', function (e) {
                e.preventDefault();
                var url = $(this).attr('data-url');

                $.post(url, $("#anti-form").serialize(), function (data) {
                    Common.ShowBox(data.Status, data.Message, "操作")

                    setTimeout(function () {
                        location.reload();
                    }, 1000);
                });
            });

            //Recommend
            $(document).on("click", '.recommend-item', function (e) {
                e.preventDefault();
                var url = $(this).attr('data-url');

                $.post(url, $("#anti-form").serialize(), function (data) {
                    Common.ShowBox(data.Status, data.Message, "操作")

                    setTimeout(function () {
                        location.reload();
                    }, 1000);
                });
            });


            //delete
            $(document).on("click", '.delete-item', function (e) {
                e.preventDefault();
                var url = $(this).attr('data-url');

                bootbox.setLocale("zh_CN");

                bootbox.confirm("是否确定删除该项？", function (result) {
                    if (result) {
                        $.post(url, $("#anti-form").serialize(), function (data) {

                            Common.ShowBox(data.Status, data.Message, "操作")

                            setTimeout(function () {
                                location.reload();
                            }, 1000);
                        });
                    }
                });
            });
            
        });
    </script>

}